<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<!-- 
		<li>0</li>
		<li>1</li>
		<li>2</li>
		-->
		
		<script>
			console.log('aaa');
			new Promise((resolve) => {
				console.log('bbb');
				// resolve();
				new Promise((resolve) => {
					console.log('ccc');
					resolve();
				}).then(() => {
					console.log('111');
					new Promise((resolve) => {
						console.log('eee');
						resolve();
					}).then(() => {
						console.log('fff');
					})
				})
			}).then(() => {
				console.log('ggg');
				new Promise((resolve, reject) => {
					console.log('222');
					resolve();
				}).then(() => {
					console.log('333')
				})
			})
			console.log('hhh');
			
			document.write('aaa ', 'bbb ', 'ccc ', 'hhh ', '111 ', 'eee ', 'ggg ', '222 ', 'fff ', '333')
			/*
			const shape = {
				radius: 10,
				diameter() {
					return this.radius * 2;
				},
				perimeter: () => 2 * Math.PI * this.radius
			};
			console.log(shape.diameter());
			console.log(shape.perimeter());
			
			for (var i = 0; i < 3; i++) {
				setTimeout (() => console.log(i), 500)
			}
			
			for (let i = 0; i < 3; i++) {
				setTimeout (() => console.log(i), 500)
			}
			
			let list = document.querySelectorAll('li');
			for (let i = 0; i < list.length; i++) {
				list[i].onclick = () => console.log(i);
			}
			*/
		</script>
	</body>
</html>